<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <form action="http://10.190.135.20:8081/projects/13/pipeline/today" method="get" id="login">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" id="btn" value="登录" />
  </form>
  <script>
    // 1.ajax是什么:异步JavaScript和XML(可扩展标记语言)
    // 2.使用AJAX可以在不刷新整个页面的情况下做局部刷新
    // XMLHttpRequest
    // Ajax想要实现浏览器与服务器之间的异步通信，需要依赖XMLHttpRequest,他是一个构造函数
    // 不论是XMLHttpRequest，还是Ajax,都没有和具体的某种数据格式绑定

    // 3，Ajax使用步骤
    // 3.1.创建xhr对象
    const url = "http://10.190.135.20:8081/projects/13/pipeline/today";
    const xhr = new XMLHttpRequest();
    // 3.2准备发送请求（true代表异步，false代表同步）
    // xhr.open('HTTP方法GET POST PUT DELETE', '地址URL',true)；
    // 调用open并不会真正的发送请求，而知识做好发送请求前的准备工作
    // 3.3.发送请求
    // 调用send()正式发送请求
    // send()的参数是通过请求体携带的数据
    xhr.open("GET", url, true);
    // 3.4监听事件，处理响应
    // 当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对响应事件进行处理
    // xhr.onreadystatechange = () => {
    //     if (xhr.readyState !== 4) return;
    //     // HTTP CODE
    //     if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
    //         console.log("responseText:", xhr.responseText); //有使用范围只能使用在类型为''或者text后可以使用'
    //         console.log("response:", xhr.response); //使用范围广,但是要考虑兼容性
    //         console.log(xhr.responseType);
    //     } else {
    //         console.log("根据不同的状态码做相应的处理");
    //     }
    // };
    xhr.send(null);
    // 属性
    xhr.responseTyp;
    xhr.timeout = 10000; // 超时则取消   IE6-7不支持
    // xhr.withCredentials属性
    // 指定使用Ajax发送请求时是否携带Cookie
    // 使用Ajax发送请求时,默认情况下,同域会携带Cookie,跨域时,不会
    // 最终能否成功跨域携带Cookie,还要看服务器同不同意

    xhr.withCredentials = true; //携带IE10开始支持
    // readystatechange事件可以配合addEventListener使用，不过要注意，IE6-8不支持addEventListener
    // 为了兼容性，readystatechange中不使用this,而是直接使用xhr
    // 4.数据编码
    // 如果携带的数据是非英文的华，就要编码之后再发送给后端，不然会造成乱码问题
    // ${encodeURIComponent('前端')},浏览器会自动编码，但是不同的浏览器可能用不同的编码方式，因此最好自己编码
    // 数据传输
    // get只能通过请求头传输数据，post可以通过请求头，也可以通过请求头传输数据
    // xhr.send('username=axc&age=15')
    // xhr.send({'username':'xxx'}) 需要先将对象转换成字符串
    // 将字符串转换成对象
    // JSON.parse();
    // 将JS中对应值转化成字符串
    console.log(
      typeof JSON.stringify({
        username: "sd",
      })
    );
    // 方法
    // 1.abort()
    // 终止当前请求
    // 2.setRequestHeader()
    // 可以设置头信息
    // 请求头中的Content-Type字段用来告诉服务器,浏览器发送的数据是什么格式的
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //form数据
    xhr.setRequestHeader("Content-Type", "application/json"); //json数据
    // 事件
    // 1.load事件IE6-8不支持
    // 响应数据可用时触发（替代readystatechange）
    xhr.addEventListener(
      "load",
      () => {
        if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
          console.log("response:", xhr.response); //使用范围广,但是要考虑兼容性
        } else {
          console.log("根据不同的状态码做相应的处理");
        }
      },
      false
    );
    // 2.error事件IE10支持
    xhr.addEventListener(
      "error",
      () => {
        console.log("error");
      },
      false
    );
    // 3.abort事件（与abort方法连用）
    xhr.addEventListener(
      "abort",
      () => {
        console.log("abort");
      },
      false
    );
    // 4.timeout事件
    xhr.addEventListener(
      "timeout",
      () => {
        console.log("timeout");
      },
      false
    );

    // 1,使用Ajax提交表单
    const loginForm = document.getElementById("login");
    const btn = document.getElementById("btn");
    const {
      username,
      password
    } = loginForm;
    const xhr = new XMLHttpRequest();
    btn.addEventListener(
      "click",
      (e) => {
        // 阻止表单自动提交
        e.preventDefault();
        // 表单数据校验

        // 发送Ajax请求
        xhr.open("GET", url, true);

        // 组装数据
        // xhr.send("username=ass&password=123456");
        // const data = `username=${username.value}&password=${password.value}`;
        // xhr.setRequestHeader(
        //     "Content-Type",
        //     "application/x-www-form-urlencoded"
        // );
        // 使用FormData代替
        const data = new FormData(loginForm);
        xhr.send(data);
      },
      false
    );
        // http协议至今，主要经历了三个版本。
        // http1.0 短连接，单工通信
        // http/1.0默认的模型是短连接，每个HTTP请求都由他自己独立完成，下图左1，可以看到每一个http请求都对应了一个建立连接关闭连接的阶段，每一个请求都有TCP握手和挥手的阶段。
        // 在这个模型下，想要做到实时更新页面数据，只能考虑轮询。
        // http1.1 支持长链接，半双工通信
        // 1.0之后的版本，1.1会让某个连接保持一定的时间，在这段时间里重复发送一系列请求（下图左2），就是保活。
        // http2.0 支持多路复用，全双工通信
  </script>
</body>

</html>